<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11_ajax</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
<script type="text/babel">
    /*
    需求:
      1. 界面效果如下
      2. 根据指定的关键字在github上搜索匹配的最受关注的库
      3. 显示库名, 点击链接查看库
      4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars
    */

    class MostStarRepo extends React.Component {
        state = {
            repoName: "",
            repoUrl: ""
        }

        // 声明周期函数
        componentDidMount() {
            // 发送异步请求服务器
            axios.get(` https://api.github.com/search/repositories?q=r&sort=stars`)
                .then((resp => {
                    const {full_name, html_url} = resp.items[0];

                    // 更新数据
                    this.setState({
                        repoName: full_name,
                        repoUrl: html_url
                    })
                }))
                .catch(error => {
                    console.log(error);
                })

        }

        render() {
            const {repoName, repoUrl} = this.state;
            if (!repoName) {
                return <h2>loading ......</h2>
            } else {
                return <h2>most star repo is <a href={repoUrl}>{repoName}</a></h2>
            }
        }
    }

    ReactDOM.render(<MostStarRepo/>, document.getElementById("example"));
</script>